<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>表格缩略图</title>
    <link rel="stylesheet" href="__LIBS__/layui/css/layui.css"/>
    <link rel="stylesheet" href="__MODULE__/admin.css?v=317"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #tbImgTable + .layui-table-view .layui-table-body tbody > tr > td {
            padding: 0;
        }

        #tbImgTable + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
            height: 48px;
            line-height: 48px;
        }

        .tb-img-circle {
            width: 40px;
            height: 40px;
            cursor: zoom-in;
            border-radius: 50%;
            border: 2px solid #dddddd;
        }
    </style>
</head>
<body>
<!-- 加载动画 -->
<div class="page-loading">
    <div class="ball-loader">
        <span></span><span></span><span></span><span></span>
    </div>
</div>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">搜索:</label>
                        <div class="layui-input-inline">
                            <input name="keyword" class="layui-input" placeholder="输入昵称、手机号或UID"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">按单位筛选:</label>
                        <div class="layui-input-inline">
                            <input id="classify" name="students_flid" value="{$item['students_flid']?$item['students_flid']:''}" placeholder="请选择" class="layui-hide" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="imgTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <a ew-href="{:url('daoru_user')}" ew-title="导入学员">
                            <button class="layui-btn layui-btn-warm icon-btn" type="button">
                                <i class="layui-icon">&#xe654;</i>导入学员
                            </button>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 数据表格 -->
            <table id="tbImgTable" lay-filter="tbImgTable"></table>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<!-- 表格操作列 -->
<script type="text/html" id="tbBasicTbBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="vipset">设置VIP</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-dropdown="#userTbDrop{{d.LAY_INDEX}}" no-shade="true">
        更多<i class="layui-icon layui-icon-drop" style="font-size: 12px;margin-right: 0;"></i></a>
    <!-- 下拉菜单 -->
    <ul class="dropdown-menu-nav dropdown-bottom-right layui-hide" id="userTbDrop{{d.LAY_INDEX}}">
        <div class="dropdown-anchor"></div>
        <li><a lay-event="studytime"><i class="layui-icon layui-icon-time"></i>学习记录</a></li>
        <li><a lay-event="cancel_vip"><i class="layui-icon layui-icon-face-cry"></i>取消VIP</a></li>
        <li><a lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a></li>
        <li><a lay-event="pullblack"><i class="layui-icon layui-icon-face-cry"></i>拉黑/恢复</a></li>
        <li><a lay-event="password"><i class="layui-icon layui-icon-password"></i>重置密码(默认123456)</a></li>
    </ul>
</script>

<script type="text/javascript" src="__LIBS__/layui/layui.js"></script>
<script type="text/javascript" src="__NJS__/common.js?v=317"></script>
<script>
    layui.use(['layer', 'table','index','dropdown','cascader','tableSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var index = layui.index;
        var form = layui.form;
        var cascader = layui.cascader;
        var tableSelect = layui.tableSelect;
        cascader.render({
            elem: '#classify',
            reqData: function (values, callback, data) {
                $.ajax({
                    url:"{:url('admin/vip/classify_list_json')}",
                    success:function(res){
                        //console.log(res)
                        if(res.code==0){
                            callback(res.data)
                        }
                    }
                })
            },
            onChange: function (values, data) {
                console.log(values);
                console.log(data);
            }
        });
        /* 渲染表格 */
        var insTb=table.render({
            elem: '#tbImgTable',
            url: "{:url('admin/vip/index')}",
            page: true,
            cellMinWidth: 100,
            cols: [[
                {field: 'id', title: '编号', align: 'center',width:100,sort: true},
                {title: '昵称', templet: function (d) {
                        var viptips = d.is_vip==1?'<span style="color: red;"> [VIP]</span>':'';
                        var viptips1 = d.status==1?'<span style="color: #fff;background-color: black;"> [黑名单]</span>':'';
                        return d.nickname + viptips + viptips1;
                    },align: 'center',width:260, sort: true},
                {
                    title: '头像', templet: function (d) {
                        var url = d.avatar || '/../static/assets/images/head.jpg';
                        return '<img src="' + url + '" class="tb-img-circle" tb-img alt=""/>';
                    }, align: 'center', unresize: true
                },
                {field: 'phone', title: '联系电话', align: 'center',width:150, sort: true},
                {field: 'viplevelname', title: '会员等级',align: 'center', sort: true},
                {field: 'money', title: '余额', align: 'center', sort: true},
                {field: 'credit', title: '积分', align: 'center', sort: true},
                {field: 'danwei', title: '单位/分组',width:120, align: 'center', sort: true},
                {field: 'banji', title: '机构/班级',width:120, align: 'center', sort: true},
                {field: 'pinfo', title: '推荐人/PID', align: 'center', sort: true},
                {field: 'createtime', title: '注册时间', align: 'center', sort: true},
                {field: 'ipaddr', title: '地区', align: 'center', sort: true},
                {field: 'apptype', title: '来自', align: 'center', sort: true},
                {field: 'lasttime', title: '最近登录时间', align: 'center', sort: true},
                {field: 'last_login_ip', title: '最后登录IP', align: 'center', sort: true},
                {title: '操作', toolbar: '#tbBasicTbBar',align: 'center', minWidth: 200}
            ]]
        });

        /* 点击图片放大 */
        $(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
            layer.photos({photos: {data: [{src: $(this).attr('src')}]}, shade: .1, closeBtn: true});
        });
        // 工具条点击事件
        table.on('tool(tbImgTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent == 'edit') {
                index.openTab({
                    title: '编辑用户信息',
                    url: "{:url('vipedit')}?id="+data.id,
                });
            }else if (layEvent == 'pullblack') {
                doLh(data.id);
            }else if (layEvent == 'password') {
                dopwd(data.id);
            }
            else if (layEvent == 'vipset') {
                index.openTab({
                    title: '设置VIP',
                    url: "{:url('vipset')}?id="+data.id,
                });
            }else if (layEvent == 'studytime') {
                index.openTab({
                    title: '用户学习记录',
                    url: "{:url('userstudytime')}?uid="+data.id,
                });
            } else if (layEvent == 'del') {
                doDel(data.id);
            }else if (layEvent == 'cancel_vip'){
                doCancel(data.id);
            }
        });
        //取消vip
        function doCancel(id){
            layer.confirm('确定要取消VIP吗？', {
                shade: .1,
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                $.post("{:url('cancel_vip')}", {
                    id: id
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }
        // 删除
        function doDel(id) {
            layer.confirm('确定要删除吗？', {
                shade: .1,
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                $.post("{:url('vip_del')}", {
                    id: id
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }
        function doLh(id) {
            layer.confirm('确定要操作拉黑/取消拉黑吗？', {
                shade: .1,
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                $.post("{:url('vip_pullblack')}", {
                    id: id
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }
        function dopwd(id) {
            layer.confirm('确定要重置密码吗？', {
                shade: .1,
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                $.post("{:url('edit_password')}", {
                    id: id
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }
        /* 表格搜索 */
        form.on('submit(imgTbSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });
    });
</script>
</body>
</html>
